<template>
	<uni-card>
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="标题" required name="title">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入帖子标题" />
				</uni-forms-item>

				<uni-forms-item label="自我介绍" name="introduction">
					<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入内容，最多50字"
						maxlength="50" />
				</uni-forms-item>
				<uni-forms-item label="图片上传" name="image">
					<uni-file-picker limit="1"></uni-file-picker>
				</uni-forms-item>


			</uni-forms>
			<button class="submit_btn" @click="submit('valiForm')">发帖</button>
		</view>
	</uni-card>


</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {
					title: '',
					introduction: '',
					image:null,
				},
			}
		},
		rules: {
			name: {
				rules: [{
					required: true,
					errorMessage: '姓名不能为空'
				}],

			},
			introduction: [{
				required: true,
				errorMessage: '简介不能为空'
			}]
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);

					uni.showToast({
						title: `校验通过`
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 1000)
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style>
	.submit_btn {
		color: #fff;
		background-color: #8bddce;
		box-shadow: 0 4rpx 8rpx rgba(90, 212, 228, 0.3);
		border-radius: 10rpx;
		margin-top: 20rpx;

	}
</style>
